{extend name="layout/layout" /}
{block name="navbar"}{/block}

<!--app过来的隐藏头部-->
{if condition="input('type') eq 'app'"}
	{block name="header"}{/block}
{/if}

{block name="style"}
	<style type="text/css">
		.mui-card{
			margin: 10px 2px;
		}

		.mui-card-content{
			padding: 5px;
		}
		
		.mui-card-content img{
			max-width:100%;
		}
	</style>
{/block}

{block name="main"}

	<div class="container" v-cloak>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header">{{detail.title}}</div>
			<!--内容区-->
			<div class="mui-card-content" v-html="detail.content"></div>
			<!--页脚，放置补充信息或支持的操作-->
			<!--<div class="mui-card-footer">{{detail.create_time_text}}</div>-->
		</div>	
	</div>
{/block}

{block name="script"}
	<script type="text/javascript">
		var detailVue = new Vue({
			el: '.container',
			data: {
				detail: {},
				id: '{$id}'
			},
			mounted: function(){
				this.getDetail();
			},
			methods: {
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose: false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});

					var that = this;
					request(that, {'url': 'article/detail', 'data':  {'id':that.id}}, function(res){
						if(res.code == 200) {
							that.detail = res.data;
							document.title = res.data.title;
						} else {
							mui.toast(res.msg);
						}
					});
				}
			}
		});	
	</script>
{/block}